<template>
	<view class="container">
		<!-- 主体 -->
		<view class="main">
			<uni-section v-for="item in list" :key="item">
				<uni-card :is-shadow="false" @click="toggleExpand(item)">
					<view class="feedback-item">
						<view class="feedback-time">反馈时间：{{item.datetime}}</view>
						<view class="feedback-content">反馈内容：{{item.content}}</view>
						<view class="feedback-reply">
							<text>回复内容：</text>
							<view :class="['reply-content', item.isExpanded ? 'expanded' : '']">
								<rich-text :nodes="item.reply"></rich-text>
							</view>
							<view class="expand-indicator" v-if="item.reply && item.reply.length > 10">
								{{ item.isExpanded ? '收起' : '查看全部' }}
							</view>
						</view>
					</view>
				</uni-card>
			</uni-section>
		</view>

		<!-- 底部 -->
		<view class="footer">
			<button class="submit-button" @click="submitFeedback">提交反馈</button>
		</view>
	</view>
</template>

<script setup>
	import {
		getFeedbackList
	} from "@/api/user.js"
	import {
		reactive,
		ref,
		defineProps,
		defineEmits
	} from "vue"
	import {
		onShow
	} from "@dcloudio/uni-app"
	import {
		getUser
	} from "@/utils/token.js"
	const user = getUser()
	const formOptions = reactive({
		customer_id: 0,
		page: 1,
		limit: 10
	})
	onShow(() => {
		formOptions.customer_id = user.id
		getList()
	})
	const count = ref(0)
	const list = ref([])

	function getList() {
		getFeedbackList(formOptions).then(e => {
			console.log(e)
			count.value = e.data.count
			list.value = list.value.concat(e.data.list.map(item => ({
				...item,
				isExpanded: false
			})))
		})
	}
	const navBack = () => {
		uni.navigateTo({
			url: "/pages/mine/fanKui/detail"
		})
	}

	const toggleExpand = (item) => {
		item.isExpanded = !item.isExpanded
	}
</script>

<style scoped>
	/* 样式部分 */
	.container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
	}

	.header {}

	.main {
		flex: 1;
		/* 主体部分占满剩余空间 */
		overflow-y: auto;
		/* 如果内容超出可视区域，则允许垂直滚动 */
		padding: 20rpx;
	}

	.feedback-item {
		padding: 20rpx;
	}

	.feedback-time {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 20rpx;
	}

	.feedback-content {
		font-size: 30rpx;
		margin-bottom: 20rpx;
	}

	.feedback-reply {
		font-size: 30rpx;
	}

	.reply-content {
		max-height: 80rpx;
		overflow: hidden;
		transition: max-height 0.3s ease;
	}

	.reply-content.expanded {
		max-height: none;
	}

	.expand-indicator {
		color: #E60012;
		font-size: 28rpx;
		text-align: right;
		margin-top: 10rpx;
	}

	.submit-button {
		background-color: #E60012;
		color: white;
		padding: 20rpx;
		border-radius: 10rpx;
		text-align: center;
		margin: 20rpx;
		width: 90%;
	}
</style>